<script setup>
import {defineProps, ref,onMounted} from 'vue'
const name=ref('Message')
const props = defineProps({
    message: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: 'warn'
    }
})
const style = {
    success: {
        icon: 'icon-gou'
    },
    warn: {
        icon: 'icon-tixing'
    },
    error: {
        icon: 'icon-cha1'
    }
}
// 控制显示与隐藏
const isShow = ref(true)
onMounted(() => {
    isShow.value = true;
    setTimeout(() => {
        isShow.value = false;
    }, 3000);
})
</script>
<template>
    <Transition name="dowm">
        <div class="message" v-if="isShow">
            <div class="message-item">
                <i class="iconfont" :class="style[type].icon"></i>
                <span class="text">{{ message }}</span>
            </div>
        </div>
    </Transition>

</template>
<style lang="less" scoped>
@import "../../../assets/fonts/icon/iconfont.css";
.dowm{
    &-enter{
        &-from{
            transform: translateY(-30px);
            opacity: 0;
        }
        &-action{
            transition: @tr;
        }
        &-to{
            transform: translateY(0);
            opacity: 1;
        }
    }
    &-leave{
        &-from{
            transform: translateY(0);
            opacity: 1;
        }
        &-action{
            transition: @tr;
        }
        &-to{
            transform: translateY(-30px);
            opacity: 0;
        }
    }
}
.message {
    width: 100%;
    height: 40px;
    position: fixed;
    z-index: 9999;
    top: 60px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    .message-item {
        padding: 0 20px;
        border-radius:8px;
        color: @gray-1;
        background: @gray-10;
        box-shadow:0 4px 16px rgba(0,0,0,0.1)
    }
    i{
        margin-right: 6px;
        vertical-align: middle;
    }
    .text{
        vertical-align: middle;
    }
}
//icon颜色
.icon-gou {
    color:#22BF87;
}
.icon-tixing {
    color: #F67770;
}
.icon-cha1 {
    color:#F35248;
}
</style>
